<template>
  <!-- 参保条目点击详情，打开的参保详情弹窗 -->
  <div id="InsuredDetailsDialog">
    <el-dialog :title="title" :visible="visible" destroy-on-close :before-close="handleClose" width="800px" @open="handleOpen">
      <div class="dialogContent">
        <div v-if="pageStatus == 4" class="title">{{activeData.realName}}</div>
        <InsuredIndex ref="insuredIndex" :type="2" :infoData="editForm" :pageStatus="pageStatus" :isAccount="isAccount" @submit="handleSupplementaryPay" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'InsuredDetailsDialog',
  components: {
    InsuredIndex: () => import('./InsuredIndex.vue')
  },
  props: {
    activeData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    pageStatus: {
      type: Number,
      default: 1
    },
    visible: {
      type: Boolean,
      default: false
    },
    isAccount: { // 是否是在社保公积金台账页打开
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      title: '',
      editForm: {},
      isShowCom: false,
    };
  },
  methods: {

    /**
     * @description 点击参保记录表格详情按钮，查看当前条参保记录详情数据
     */
    searchArchivesDetailToSee(subId, isuredRecordId) {
      console.log(subId, isuredRecordId);
      this.$api.socialSecurity
        .GetRuleDetailList({ subId, isuredRecordId })
        .then(res => {
          // console.log(res);
          if (res.data.status == 200) {
            this.successCallBack(res);
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },

    /**
     * @description 通过台账详情id获取详细数据
     */
    searchAccountDetail(ledgerItemId, subId) {
      this.$api.socialSecurity
        .GetLedgerDetailData({ ledgerItemId, subId })
        .then(res => {
          if (res.data.status == 200) {
            this.successCallBack(res);
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    searchArchivesDetail(archiveId) {
      this.$api.socialSecurity
        .GetArchivesDetail({ archiveId })
        .then(res => {
          console.log(res.data.data);
          const result = res.data.data;
          delete result.hireDate;
          this.editForm = {
            ...this.editForm,
            ...result
          };

          this.$nextTick(() => {
            this.$refs.insuredIndex.initPageData();
          });
        });
      // .finally(() => {
      //   this.isLoading = false;
      // });
    },
    successCallBack(res) {
      let result = res.data.data;
      // 对字段名进行处理
      if (!result.departmentName && result.deptName) {
        result.departmentName = result.deptName;
      }
      if (!result.ssRuleItemList || !result.afRuleItemList) {
        result.ssRuleItemList = [];
        result.afRuleItemList = [];
      }
      this.editForm = result;
      // this.isShowCom = true;

      this.$nextTick(() => {
        console.log('this.$refs.insuredIndex', this.$refs.insuredIndex);
        this.$refs.insuredIndex.initPageData();
      });
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleOpen() {
      console.log(this.activeData);
      if (this.isAccount) {
        this.title = '台账详情的详情';
        this.searchAccountDetail(this.activeData.ledgerItemId, this.activeData.subId);
      } else if (this.pageStatus == 1) {
        this.title = `${this.activeData.yearNumber}年${this.activeData.monthNumber < 10 ? 0 : ''}${this.activeData.monthNumber}月参保记录`;
        this.searchArchivesDetailToSee(this.activeData.subId, this.activeData.id);
      } else if (this.pageStatus == 4) {
        // 补缴 
        this.title = "社保补缴";
        this.searchArchivesDetail(this.activeData.id);
      }
    },
    handleSupplementaryPay(data) {
      data.initMonth = data.currentYear + "-" + data.currentMonth;
      // 详情组件调用补缴操作
      console.log('补缴数据', data);
      this.$api.socialSecurity
        .AddSelfPayRecord(data)
        .then(res => {
          console.log(res);
          this.$message.success(res.data.message);
          this.$emit('search', res);
          this.handleClose();
        });
    }
  }
};
</script>
<style lang="less" scoped>
#InsuredDetailsDialog {
  :deep(.el-dialog) {
    .el-dialog__body {
      padding-right: 5px;
    }
  }
  .dialogContent {
    height: 650px;
    overflow: auto;
    padding-right: 15px;
  }
  .title {
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>